<template>
	<div class="zk-wiki-right" v-if="wiki">
		<div class="wiki-content">
			<div class="markdown-body" v-html="contValue"></div>
			<x-markdown v-show="false" ref="alaboMarkdown"></x-markdown>
		</div>

	</div>
</template>
<script>
import ala from 'ala'
export default {
	props: {
		project: {}
	},
	data() {
		return {
			wiki: null,
			contValue: ''
		}
	},
	methods: {
		init(data) {
			this.wiki = data
			if (!this.wiki) {
				return
			}
			this.$ala.setTitle(`${this.wiki.name} ${this.project.name}`)
			this.$nextTick(() => {
				if (this.wiki.content) {
					this.contValue = this.$refs.alaboMarkdown.$children[0].markdownIt.render(this.wiki.content)
				} else {
					this.contValue = this.wiki.content
				}
			})
		}
	}
}
</script>
<style lang="scss" scoped>
.markdown-body {
	box-sizing: border-box;
	margin: 0 auto;
	padding: 45px;
}

@media (max-width: 767px) {
	.markdown-body {
		padding: 15px;
	}
}

.zk-wiki-right {
	width: 100%;
	background: #ffffff;
	overflow: auto;

	.wiki-content {
		width: 1080px;
		margin: auto;
	}

	.wiki-right_contion {
		position: relative;
		left: 50%;
		transform: translateX(-50%);

		.title {
			margin-top: 10px;
			border-bottom: 1px solid #e6e6e6;
			text-decoration: none;
			color: #304455;
			font-size: 20px;
			text-align: center;
			height: 50px;
			line-height: 50px;
			font-weight: bold;
			font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
		}
	}

	.right-content {
		padding: 20px;
		margin-bottom: 50px;
	}
}
</style>